<template>
  <div style="line-height:1.8">
    <!--    单选题-->
    <div v-if="qType==0" v-loading="qLoading">
      <p class="q-title" v-html="question.theme"></p>
      <p style=" float: right">分数: <span style="color:red;">{{ question.title_score }}</span></p>
      <el-divider></el-divider>
      <p>正确答案: <span v-html="question.right_answer"></span></p>
      <div class="q-content" v-if="question.options">
        <span :key="item.id" v-for="item in question.options" class="q-item-contain">
          {{ item.prefix }}.<span v-html="item.content" class="q-item-content"></span>
          <span>&nbsp;&nbsp;</span>
        </span>
      </div>
      <div class="q-content" v-else>
        <span :key="item.id" v-for="item in question.optionItem" class="q-item-contain">
          {{ item.prefix }}.<span v-html="item.content" class="q-item-content"></span>
          <span>&nbsp;&nbsp;&nbsp;</span>
        </span>
      </div>
    </div>
    <!--    多选题-->
    <div v-else-if="qType==1" v-loading="qLoading">
      <p class="q-title" v-html="question.theme"/>
      <p style=" float: right">分数: <span style="color:red;">{{ question.title_score }}</span></p>
      <el-divider></el-divider>
      <p>正确答案: <span v-html="question.right_answer"></span></p>
      <div class="q-content" v-if="question.options">
        <span :key="item.id" v-for="item in question.options" class="q-item-contain">
          {{ item.prefix }}.<span v-html="item.content" class="q-item-content"></span>
          <span>&nbsp;&nbsp;&nbsp;</span>
        </span>
      </div>
      <div class="q-content" v-else>
        <span :key="item.id" v-for="item in question.optionItem" class="q-item-contain">
          {{ item.prefix }}.<span v-html="item.content" class="q-item-content"></span>
          <span>&nbsp;&nbsp;&nbsp;</span>
        </span>
      </div>
    </div>
    <!--    判断题-->
    <div v-else-if="qType==2" v-loading="qLoading">
      <p class="q-title" v-html="question.theme" style="display: inline;margin-right: 10px"/>
      <p style=" float: right">分数: <span style="color:red;">{{ question.title_score }}</span></p>
      <el-divider></el-divider>
      <p>正确答案: <span v-html="question.right_answer"></span></p>
      <div class="q-content" v-if="question.options">
        <span :key="item.id" v-for="item in question.options" class="q-item-contain">
          {{ item.prefix }}.<span v-html="item.content" class="q-item-content"></span>
          <span>&nbsp;&nbsp;&nbsp;</span>
        </span>
      </div>
      <div class="q-content" v-else>
        <span :key="item.id" v-for="item in question.optionItem">
          {{ item.prefix }}.<span v-html="item.content" class="q-item-content"></span>
          <span>&nbsp;&nbsp;&nbsp;</span>
        </span>
      </div>
    </div>
    <!--    简答题-->
    <div v-else-if="qType==3" v-loading="qLoading">
      <p class="q-title" v-html="question.theme"/>
      <p style=" float: right">分数: <span style="color:red;">{{ question.title_score }}</span></p>
      <el-divider></el-divider>
      <div class="a-content">
        <div>正确答案:
          <span v-html="question.right_answer"></span>
        </div>
      </div>
    </div>
    <div v-else>
    </div>
  </div>

</template>

<script>
export default {
  name: 'QuestionShow',
  props: {
    question: {
      type: Object,
      default: {},
    },
    qLoading: {
      type: Boolean,
      default: false
    },
    qType: {
      type: Number,
      default: 0
    }
  },
  methods: {},
  created() {
  },
}
</script>
